<template>
  <el-timeline-item  :icon="Clock" size="large" type="info">
    <template v-if="nodeConfig.type === 'exclusive'">
      <div class="node-name">条件分支</div>
      <div class="exclusive-node">
        <el-radio-group v-model="conditionId" @change="handleChangeCondition">
          <el-radio-button v-for="item in nodeConfig.conditionNodes" :key="item.id" :label="item.id" size="small">{{ item.nodeName }}</el-radio-button>
        </el-radio-group>
      </div>
    </template>
    <template v-else>
      <div class="node-name">{{ nodeConfig.nodeName }}</div>
    </template>
    <div class="node-description">{{ showText }}</div>
  </el-timeline-item>
  <NodeRender v-if="nodeConfig.conditionNodes?.length > 0 && conditionNode" :nodeConfig="conditionNode" />
  <NodeRender v-if="nodeConfig.childNode" :nodeConfig="nodeConfig.childNode" />
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { Clock } from '@element-plus/icons-vue'
import $func from '@/utils/flow'

const props = defineProps({
  nodeConfig: {
    type: Object,
    default: () => {}
  }
})

let showText = computed(() => {
  if (nodeConfig.value.type == 'start') return $func.operatorToString(nodeConfig.value) || '所有人'
  if (nodeConfig.value.type == 'approval') return $func.setApproverStr(nodeConfig.value) || '请设置审批人'
  if (nodeConfig.value.type == 'cc') return $func.setCopyerStr(nodeConfig.value) || '请设置抄送人'
  if (nodeConfig.value.type == 'exclusive') {
    let condition = nodeConfig.value.conditionNodes.find(item => item.id == conditionId.value)
    return $func.conditionStr(condition) || '请设置条件'
  }
  return ''
})
const nodeConfig = computed(() => props.nodeConfig)
const conditionId = ref('')
const conditionNode = ref({conditionList: []})
const handleChangeCondition = (id) => {
  const temp = nodeConfig.value.conditionNodes.find(item => item.id === id)
  if(temp.conditionNodes?.length > 0){
    conditionNode.value = temp.conditionNodes[0]
  } else {
    conditionNode.value = temp.childNode
  }
}
watch(props.nodeConfig, (newVal) => {
  if(newVal.type == 'exclusive'){
    conditionId.value = newVal.conditionNodes[0].id
    handleChangeCondition(newVal.conditionNodes[0].id)
  }
}, { deep: true, immediate: true })
</script>

<style lang="scss" scoped>
.node-name{
  font-size: 14px;
  font-weight: 600;
}
.node-description{
  font-size: 14px;
  color: #666666;
  margin-top: 5px;
}
.exclusive-node{
  margin-top: 5px;
}
</style>